<!DOCTYPE html>
<html>

<head>
	<title>Flutter 3D To ThreeJS</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			font-family: 'Raleway', sans-serif;
			background: #191919;
			height: 100%;
			overflow: hidden;
		}

		.viewer {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.4/dist/es-module-shims.js"></script>

	<script type="importmap">
			{
				"imports": {
					"three": "./three.module.js"
				}
			}
		</script>


	<script type="module">
		import * as THREE from 'three';
		import { GLTFLoader } from './GLTFLoader.js';
		import { RGBELoader } from './RGBELoader.js';
		import { OrbitControls } from './OrbitControls.js';
		let el, camera, scene, renderer, controls, content;

		init();
		animate();


		function init() {
			el = document.createElement('div');
			el.className = "viewer"; 
			document.body.appendChild(el);

			scene = new THREE.Scene();

			const fov = 0.8 * 180 / Math.PI;
			camera = new THREE.PerspectiveCamera(fov, el.clientWidth / el.clientHeight, 0.01, 1000);
			scene.add(camera);

			const light1 = new THREE.AmbientLight(0xcccccc, 1.5);
			scene.add(light1);
			const light2 = new THREE.PointLight(0xffffff, 0.01);
			camera.add(light2);

			const onProgress = function (xhr) {
				if (xhr.lengthComputable) {
					const percentComplete = xhr.loaded / xhr.total * 100;
					let progress = Math.round(percentComplete, 2)
					console.log(progress + '% downloaded');

				}
			};

			const onError = function (error) {
				console.log(error);
			}

			const params = new URLSearchParams(location.search);
			const path = params.get('name');

			new GLTFLoader()
				.setPath("../models/")
				.load(path, function (gltf) {

					const scene = gltf.scene || gltf.scenes[0];
					setContent(scene);

				}, onProgress, onError);

			renderer = new THREE.WebGLRenderer({ antialias: true });
			renderer.outputEncoding = THREE.sRGBEncoding;
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(el.clientWidth, el.clientHeight);
			el.appendChild(renderer.domElement);

			controls = new OrbitControls(camera, renderer.domElement);
			controls.listenToKeyEvents(window);
			controls.enableDamping = true;
			controls.enablePan = false;
			controls.enableRotate = true;
			controls.screenSpacePanning = false;
			controls.enableZoom = true;

			window.addEventListener('resize', onWindowResize);
		}

		function setContent(object) {
			const box = new THREE.Box3().setFromObject(object);
			const size = box.getSize(new THREE.Vector3()).length();
			const center = box.getCenter(new THREE.Vector3());

			controls.reset();

			object.position.x += (object.position.x - center.x);
			object.position.y += (object.position.y - center.y);
			object.position.z += (object.position.z - center.z);

			controls.maxDistance = size * 10;

			camera.near = size / 100;
			camera.far = size * 100;
			camera.updateProjectionMatrix();

			camera.position.copy(center);
			camera.position.x += size / 2.0;
			camera.position.y += size / 5.0;
			camera.position.z += size / 2.0;
			camera.lookAt(center);

			controls.saveState();

			scene.add(object);

			content = object;
		}

		function onWindowResize() {
			camera.aspect = el.clientWidth / el.clientHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(el.clientWidth, el.clientHeight);
		}

		function animate() {
			requestAnimationFrame(animate);
			controls.update();
			renderer.render(scene, camera);
		}



	</script>
</body>

</html>